<template>
  <div class="all-payment-record flex-auto">
    <div class="flex align-center justify-content-space-between" style="margin-bottom: 20px">
      <div class="title">缴费记录</div>
      <div class="flex" >
        <el-select style="width: 160px" v-model="payRecord.record" placeholder="请选择支部">
          <el-option label="全部" value="all"></el-option>
          <el-option label="已完成" value="completed"></el-option>
        </el-select>
        <el-select style="width: 160px;margin: 0 10px" v-model="payRecord.record" placeholder="请选择支付状态">
          <el-option label="全部" value="all"></el-option>
          <el-option label="已完成" value="completed"></el-option>
        </el-select>
        <div class="flex-auto search-input-box flex align-center" style="width: 220px">
          <el-input v-model="searchText" :prefix-icon="Search" class="search" placeholder="搜索党员姓名"></el-input>
          <el-button class="search-button" icon="Search" type="primary">搜索</el-button>
        </div>

      </div>
    </div>
    <!-- 表格 -->
   <div class="flex">

     <div style="margin-right: 10px" class="flex-auto">
       <el-table :data="recordsList.slice(0, Math.ceil(recordsList.length / 2))" style="width: 100%" height="300px">
         <el-table-column prop="method" label="党员姓名"  align="center"  width="150px">
           <template #default="{ row }">
             <div class="flex ">
               <div class="avatar">{{ row.name.charAt(0) }}</div>
               <div style="flex: 1;">
                 <div style="font-weight: bold; color: #333;">{{ row.name }}</div>
                 <div style="color: #999; font-size: 12px;">{{row.position}}</div>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column prop="department" label="所属支部"  align="center" />
         <el-table-column prop="amount" label="应缴金额"  align="center" />
         <el-table-column prop="status" label="状态" align="center">
           <template #default="{ row }">
             <div class="status-tag" :class="getStatusClass(row.status)">
               {{ getStatusText(row.status) }}
             </div>
           </template>
         </el-table-column>
       </el-table>
     </div>

     <div style="margin-left: 10px" class="flex-auto">
       <el-table :data="recordsList.slice(Math.ceil(recordsList.length / 2))" style="width: 100%" height="300px">
         <el-table-column prop="method" label="党员姓名"  align="center"  width="150px">
           <template #default="{ row }">
               <div class="flex ">
                 <div class="avatar">{{ row.name.charAt(0) }}</div>
                 <div style="flex: 1;">
                   <div style="font-weight: bold; color: #333;">{{ row.name }}</div>
                   <div style="color: #999; font-size: 12px;">{{row.position}}</div>
                 </div>
               </div>
           </template>
         </el-table-column>
         <el-table-column prop="department" label="所属支部"  align="center" />
         <el-table-column prop="amount" label="应缴金额"  align="center" />
         <el-table-column prop="status" label="状态" align="center">
           <template #default="{ row }">
             <div :class="getStatusClass(row.status)">{{ getStatusText(row.status) }}</div>
           </template>
         </el-table-column>
       </el-table>
     </div>
   </div>
    <div style="position:relative;">
      <pagination :total="Number(recordsList.length)" v-model:page="payRecord.skipCount" v-model:limit="payRecord.maxResultCount" @pagination="getCancerIndicatorList" /></div>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/dist/index.css'
import {User, Lock, Phone, Search} from '@element-plus/icons-vue';
import {ref} from "vue";
const recordsList = ref( [
  {
    name: '郑雅文',
    position: '主任医师',
    department: '内科支部',
    amount: '¥86.50',
    status: 1
  },
  {
    name: '刘建国',
    position: '副主任医师',
    department: '外科支部',
    amount: '¥86.50',
    status: 2
  },
  {
    name: '张静怡',
    position: '主管药师',
    department: '妇产科支部',
    amount: '¥86.50',
    status: 0
  },
  {
    name: '林雨薇',
    position: '主管护师',
    department: '儿科支部',
    amount: '¥86.50',
    status: 0
  },
  {
    name: '黄晓明',
    position: '主任技师',
    department: '医技支部',
    amount: '¥86.50',
    status: 2
  },
  {
    name: '周文昌',
    position: '副主任医师',
    department: '内科支部',
    amount: '¥86.50',
    status: 1
  },
  {
    name: '陈思远',
    position: '主治医师',
    department: '外科支部',
    amount: '¥86.50',
    status: 1
  },
  {
    name: '刘远远',
    position: '主治医师',
    department: '外科支部',
    amount: '¥86.50',
    status: 2
  },
  ]); // 模拟数据


const getStatusText = (statusValue) => {
  switch (statusValue) {
    case 0:
      return '未缴费';
    case 1:
      return '部分缴费';
    case 2:
      return '已缴费';
    default:
      return '未知缴费';
  }
};

const getStatusClass = (statusValue) => {
  switch (statusValue) {
    case 0: // 未缴费
      return 'status-unpaid';
    case 1: // 部分缴费
      return 'status-partial';
    case 2: // 已缴费
      return 'status-paid';
    default:
      return '';
  }
};


const payRecord = ref({
  record: '', // 科室
  skipCount: 1, // 当前页
  maxResultCount: 10 // 一页的数据量
});
const getCancerIndicatorList = ()=>{  // 缴费记录分页

}

</script>

<style scoped lang="scss">
.all-payment-record{
  margin-top: 20px;
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 10px;
  .title{
    font-size: 18px;
    color: #333333;
    font-weight: bolder;
  }
  .search{
    margin-right: 10px;
  }
  .avatar{
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #E5E7EB;
    border-radius: 50%;
    font-size: 16px;
    color: #333333;
  }



  .status-unpaid {
    background-color: #FEE2E2;
    color: #A12C2C;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bolder;
    margin: 0 auto;
  }

  .status-partial {
    background-color: #FEF9C3;
    color: #A27639;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bolder;
    margin: 0 auto;
  }

  .status-paid {
    background-color: #DCFCE7;
    color: #2E7749;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bolder;
    margin: 0 auto;
  }
}
</style>
